<template>
  <div class="image-selector">
    <div class="select-trigger" @click="showDialog">
      <button class="scan-btn" type="button">检测</button>
    </div>

    <!-- 图片选择弹窗 -->
    <div v-if="dialogVisible" class="dialog-overlay" @click="closeDialog">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>选择图片</h3>
          <button class="close-btn" @click="closeDialog">×</button>
        </div>
        <div class="dialog-body">
          <div class="image-grid">
            <div 
              v-for="(image, index) in imageList" 
              :key="index"
              class="image-item"
              :class="{ active: tempSelection === image.path }"
              @click="selectImage(image.path)"
            >
              <img :src="image.path" :alt="image.name">
              <span class="image-name">{{ image.name }}</span>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="closeDialog">取消</button>
          <button class="confirm-btn" @click="confirmSelection">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageSelector',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      imageList: [],
      selectedImage: this.value,
      tempSelection: null
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.selectedImage = newVal
        this.tempSelection = newVal
      }
    }
  },
  methods: {
    async showDialog() {
      this.dialogVisible = true
      await this.scanImages()
      this.tempSelection = this.selectedImage
    },
    closeDialog() {
      this.dialogVisible = false
      this.tempSelection = this.selectedImage
    },
    async scanImages() {
      try {
        const images = import.meta.glob('@/assets/images/*.(png|jpg|jpeg|gif|svg)', { eager: true })
        this.imageList = Object.entries(images).map(([path, module]) => ({
          name: path.split('/').pop(),
          path: module.default
        }))
      } catch (error) {
        console.error('扫描图片失败:', error)
        this.imageList = []
      }
    },
    selectImage(path) {
      this.tempSelection = path
    },
    confirmSelection() {
      if (this.tempSelection) {
        this.selectedImage = this.tempSelection
        this.$emit('input', this.tempSelection)
        this.$emit('change', this.tempSelection)
      }
      this.closeDialog()
    }
  }
}
</script>

<style scoped>
.image-selector {
  width: 100%;
}

.select-trigger {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.select-trigger span {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  min-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-btn {
  padding: 4px 12px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.dialog-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.image-item {
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s;
  background: #fff;
}

.image-item:hover {
  border-color: #1890ff;
  background: rgba(24, 144, 255, 0.05);
}

.image-item.active {
  border-color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}

.image-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.image-name {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog-footer button {
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn {
  background: #f0f0f0;
  border: none;
}

.confirm-btn {
  background: #1890ff;
  color: white;
  border: none;
}
</style> 